<template>
  <div>
    <section class="wrap">
      <aside class="v-aside">
        <Aside></Aside>
      </aside>
      <div class="main">
        <header>
          <ul>
            <li class="article-title">{{detail.title}}</li>
          </ul>
          <div class="clearfixed"></div>
        </header>
        <div class="content" v-html="detail.content"></div>
        <div class="reply" v-if="detail.reply_count>0">
          <div class="reply-count">{{detail.reply_count}} 回复</div>
          <div class="reply-item" v-for="(item,index) in detail.replies" :key="index">
            <div class="avatar">
              <img :src="item.author.avatar_url">
              <span class="author">{{item.author.loginname}}</span>
              <span>{{index+1}}楼 ● {{item.create_at | date}}</span>
            </div>
            <div class="reply-detail" v-html="item.content"></div>
          </div>
        </div>
      </div>
      <div class="clearfixed"></div>
    </section>
  </div>
</template>

<script>
import Aside from "../components/aside";
export default {
  components: {
    Aside
  },
  data() {
    return {
      id: 0,
      detail: 0
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.id = this.$route.params.id;
      this.$parent.show();
      this.$api
        .get(`/topic/${this.id}`)
        .then(({data, success}) => {
          if (success == true) {
            this.detail = data;
            this.$parent.hide();
          }
        })
        .catch(() => {
          this.$parent.hide();
        });
    }
  }
};
</script>

<style scoped>
.wrap .main header {
  background: #fff;
  height: 100%;
  border-bottom: 1px solid #e5e5e5;
  padding: 5px;
  box-sizing: border-box;
}
.wrap .main header ul li.article-title {
  font-size: 22px;
  margin: 8px 0;
  font-weight: bold;
}
.wrap .main .content {
  padding: 15px;
  border-radius: 0 0 3px 3px;
}
.wrap .main .reply {
  margin-top: 15px;
  background: #fff;
  border-radius: 3px 3px 0 0;
}
.wrap .main .reply .reply-count {
  padding: 10px;
  padding-left: 15px;
  background: #f6f6f6;
  border-radius: 3px 3px 0 0;
}
.wrap .main .reply .reply-item {
  border-top: 1px solid #f2f2f2;
  padding: 15px;
}
.wrap .main .reply .reply-item .avatar {
  font-size: 0.8rem;
}
.wrap .main .reply .reply-item .avatar img {
  width: 30px;
  height: 30px;
  border-radius: 3px;
  vertical-align: middle;
}
.wrap .main .reply .reply-item .avatar span {
  padding-left: 10px;
  color: #08c;
}
.wrap .main .reply .reply-item .avatar .author {
  font-weight: bold;
}
.wrap .main .reply .reply-item .reply-detail {
  padding: 10px 15px 0 10px;
}
</style>
